<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <h1>{{message}}</h1>
  <button @click="f1">点击增加+1</button>
  <button v-on:click="f2()">点击增加+2</button>
  <br> <br>
  你的按钮被点击了{{count}}次

  <br> <br>
  <!--如果写成v-bind: 那么不会动态改变input值-->
  书名: <input type="text" v-model:value="input">
  <button @click="f3">点击显示输入框内容</button>
</div>
<script src="vue.js"></script>
<script>
  let vm=new Vue({
    el:"#app",
    data:{
      message:"演示Vue事件绑定操作",
      input:"请输入书名",
      count: 0
    },
    methods: {
      f1(){
          this.count++
      },
      f2(){
        this.count+=2
      },
      f3(){
        alert(this.input)
      }
    }
  })
</script>
</body>
</html>